import React, { Component, useEffect, useState, useCallback,PureComponent,useMemo } from 'react'

// 导入路由 
import {  Route, Redirect,Link, Switch } from 'react-router-dom'
// 样式引入
import './index.css'

export default class News extends Component {
	state = {
		list: [],
	}
    componentDidMount () {
        console.log(this.refs)
		setInterval(() => {
			const { list } = this.state
			let news = '新闻' + (list.length + 1)
			this.setState({
				list: [news,...list ],
			})
		}, 1500)
	}

	getSnapshotBeforeUpdate(prevState, prevProps) {
		return this.refs.list.scrollHeight
	}
    componentDidUpdate (prevState, prevProps, height) {
        this.refs.list.scrollTop += this.refs.list.scrollHeight - height
    }
	render() {
		return (
			<div className='list' ref="list">
				{this.state.list.map((item,index) => {
					return (
						<div className='listItem' key={index}>
							{item}
						</div>
					)
				})}
			</div>
		)
	}
}

// 导入组件
// import Dev1 from '../devRouter/dev1'
// import Dev2 from '../devRouter/dev2'
// import Dev3 from '../devRouter/dev3'
// export default function News () {
//     return (
// 		<>
// 			<Link to='/home/news/dev1'>dev1</Link>
// 			<Link to='/home/news/dev2'>dev2</Link>
// 			<Link to='/home/news/dev3'>dev3</Link>
// 			{/* <Switch> */}
// 				<Route path='/home/news/dev1' component={Dev1}></Route>
// 				<Route path='/home/news/dev1' component={Dev2}></Route>
// 				<Route path='/home/news/dev3' component={Dev3}></Route>
// 			{/* </Switch> */}
// 		</>
// 	)
// }

// 浅比较

// class ChildComponent extends React.PureComponent {
//   render() {
//     return(
//       <div>
//         {this.props.numbers}
//       </div>
//     )
//   }
// }
// export default class News extends React.Component {
// 	state = {
// 		numbers: [0],
// 	}
// 	handleClick = () => {
// 		const arr = this.state.numbers
// 		arr.push(1)
// 		// const arr = [...this.state.numbers, 1]
// 		this.setState({
// 			numbers: arr,
// 		})
// 		console.log(this.state.numbers)
// 	}
// 	render() {
// 		return (
// 			<div>
// 				<button onClick={this.handleClick}>push数组</button>
// 				<ChildComponent numbers={this.state.numbers} />
// 			</div>
// 		)
// 	}
// }

// useMemo 开始
 
// export default function News() {
// 	const [count, setCount] = useState(1)
// 	const [val, setValue] = useState('')

// 	function expensive() {
// 		console.log('compute')
// 		let sum = 0
// 		for (let i = 0; i < count * 100; i++) {
// 			sum += i
// 		}
// 		return sum
// 	}

//     // const expensive = useMemo(() => {
// 	// 	console.log('compute')
// 	// 	let sum = 0
// 	// 	for (let i = 0; i < count * 100; i++) {
// 	// 		sum += i
// 	// 	}
// 	// 	return sum
// 	// }, [count])

// 	return (
// 		<div>
// 			<h4>
// 				------{count}-{val}-{expensive()}
// 				{/* ------{count}-{val}-{expensive} */}
// 			</h4>
// 			<div>
// 				<button onClick={() => setCount(count + 1)}>+增加</button>&nbsp;&nbsp;&nbsp;
// 				<input value={val} onChange={event => setValue(event.target.value)} />
// 			</div>
// 		</div>
// 	)
// }

// useMemo 结束

// useCallback的应用

// function Child({ callback }) {
// 	const [count, setCount] = useState(() => callback())
//     useEffect(() => {
//         console.log('我是子组件，我是无辜的')
// 		setCount(callback())
// 	}, [callback])
// 	return <div>{count}----子组件</div>
// }

// export default function News() {
// 	const [count, setCount] = useState(1)
// 	const [val, setVal] = useState('')

// 	const callback = useCallback(() => {  // 返回的是函数
// 		return count
// 	}, [count])
//     	// const callback = () => {
// 		// 	return count
// 		// }
// 	return (
// 		<div>
// 			<h4>{count}----父组件</h4>
// 			<Child callback={callback} />
// 			<div>
// 				<button onClick={() => setCount(count + 1)}>点我加1</button>
// 				<input value={val} onChange={event => setVal(event.target.value)} />
// 			</div>
// 		</div>
// 	)
// }

// useCallback的结束
